<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改角色</title>
</head>
<body>
    <div th:fragment="main" id="modifyRole" class="modifyRole">
        <style>
            .content {
                position: relative;
                width: auto;
            }
            .modifyRole {
                margin: 5px;
                padding: 0 15px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: #fff;
                border: 1px solid #eaeaea;
                border-radius: 5px;
                overflow: auto;
            }
            .modifyRole .title {
                padding: 18px 0px 10px;
                height: 65px;
                border-bottom: 1px solid #DDD;
                font-size: 14px;
            }
            .modifyRole .title .title-content {
                margin: 0;
                padding: 5px 10px;
                list-style: none;
                color: #000;
                background-color: #fff;
                border-radius: 0;
                border-left: 2px solid #88B7E0; 
            }
            .modifyRole .title .title-content li>a {
                color: #000;
            }
            .modifyRole .title .title-content li>a:hover {
                color: #88B7E0;
            }
            .alert-info {
                padding: 8px 12px;
                margin-top: 16px;
                border: 1px solid transparent;
                border-radius: 0px;
                color: #555;
                background-color: #F9F9F9;
                border-color: #DDD;
            }
            .alert-info b {
                color: #337ab7;
            }
            .alert-info span i,.text-title{
                color:#F00;
            }

            .role-add {
                margin-top: 40px;
                font-size: 14px;
            }
            .role-add .form-group {
                margin-bottom: 30px;
            }
            .role-add .footer {
                margin-top: 35px;
            }
            .role-add .save {
                margin-right: 10px;
            }

            .form-control[readonly] {
                background-color: #fff;
            }
            /*返回按钮  */
            .back { 
                display: inline-block;
                float: right;
                position: relative;
                margin-right: 10px; 
                width: 40px; 
                height: 28px; 
                line-height: 28px; 
                text-align: center; 
                color: #fff;
                background: #337ab7; 
                border: 1px solid #337ab7; 
                border-left: none;
                border-radius: 5px;  
            }
            .back:after{ 
                position: absolute; 
                content: " "; 
                border: transparent 13px solid;  
                border-width:  12px 8px; 
                border-right-color: #337ab7; 
                top: 1px; 
                left: -15px; 
                height: 0; 
                width: 0; 
            }
            .back:hover {
                background: #286090; 
            }
            .back:hover:after {
                border-right-color: #286090;
            }
            /*ztree样式  */
            ul.ztree {
                margin-top: 10px;
                border: 1px solid #617775;
                background: #f0f6e4;
                width:220px;
                height:360px;
                overflow-y:scroll;
                overflow-x:auto;
            }
        </style>
        <div class="title">
            <ol class="breadcrumb title-content pull-left">
                <li><a href="#platform-roleGroup-role">角色管理</a></li>
                <li>修改角色</li>
            </ol>
            <a href="#platform-roleGroup-role" class="back">返回</a>
        </div>
        <div class="alert-info">
            <b>提醒：</b>
            <span class="alert-content">以下所填信息中，带&nbsp;<i>*</i>&nbsp;的为必填项，其它为选填项。</span>
        </div>
         <div class="role-add">
            <form action="" class="form-horizontal col-xs-offset-2" id="add_form">
                <div class="form-group">
                    <label for="role-name" class="col-sm-3 control-label"><span class="text-title">*&nbsp;</span>角色名称:</label>
                    <div class="col-sm-5">
                        <input name="role-name" id="role-name" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="role-description" class="col-sm-3 control-label">描述:</label>
                    <div class="col-sm-5 ckeditor">
                        <textarea name="role-description" id="role-description" class="form-control" rows="5" placeholder="描述不能超过250个字符"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="role-tree" class="col-xs-3 control-label"><span class="text-title">*&nbsp;</span>权限列表:</label>
                    <div class="col-xs-5">
                        <input id="role-tree" name="role-tree" type="text" class="form-control input-sm" style="position:relative;" readonly onclick="toggle();">
                        <div id="menuContent" class="col-xs-12 menuContent" style="display:none; position: absolute;z-index:999;">
                            <ul id="treeDemo" class="ztree" style="margin-top:0; width:99%;max-height:200px;"></ul>
                        </div>
                    </div>
                </div>
                <div class="form-group footer">
                    <div class="col-xs-8">
                        <!-- <input type="button" value="取消" class="btn btn-default pull-right cancel" id="cancel"> -->
                        <input type="button" value="保存" class="btn btn-primary pull-right save" id="save">
                    </div>                          
                </div>
            </form>
        </div>
        <script>
            // textarea高度根据内容自适应
            $.fn.extend({
                txtaAutoHeight: function () {
                    return this.each(function () {
                        var $this = $(this);
                        if (!$this.attr('initAttrH')) {
                            $this.attr('initAttrH', $this.outerHeight());
                        }
                        setAutoHeight(this).on('input', function () {
                            setAutoHeight(this);
                        });
                    });
                    function setAutoHeight(elem) {
                        var $obj = $(elem);
                        return $obj.css({ height: $obj.attr('initAttrH'), 'overflow-y': 'hidden' }).height(elem.scrollHeight);
                    }
                }
            });
            // 父组织机构树形结构
            var setting = {
                view: {
                    dblClickExpand: false,
                    selectedMulti: true,
                    autoCancelSelected: true
                },
                check: {  
                    enable: true,  
                    chkStyle: "checkbox",  
                    chkboxType: { "Y": "s", "N": "ps" }  
                },  
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: treeClick,
                    onCheck: treeCheck
                }
            };
            $(document).ready(function(){
            	$("#message").txtaAutoHeight();
                $.ajax({
                    url: contextPath + "/authority/getAuthorityTree",
                    type: "get",
                    cache: false,
                    dataType: "json",
                    success: function(data){
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
                        $("#role-description").val(roleData.description);
    					$("#role-name").val(roleData.name);
    					var arr = JSON.parse(roleData.authorities),
    						tempNode = null,
    						len = arr.length;
    					for(var i = 0; i < len; i++){
    						tempNode = zTreeObj.getNodeByParam("id",arr[i].id);
    						zTreeObj.checkNode(tempNode);
    						$("#role-tree").val($("#role-tree").val() + tempNode.name + ";");
    					}
                    },
                    error: function(data){
                        // toastr.error("请求失败，请稍后再试!");
                    }
                });
            });
            function treeClick(event, treeId, treeNode) {
            	$.fn.zTree.getZTreeObj(treeId).checkNode(treeNode,"",true);
            	var treeObj = $.fn.zTree.getZTreeObj(treeId).getCheckedNodes(true);
            	var str = "";
            	for(var i = 0, len = treeObj.length; i < len; i++){
            		if(treeObj[i]["nodeType"] == "auth"){
            			str += ( treeObj[i].name + ";" );
            		}
            	}
            	$("#role-tree").val(str);
            }
            function treeCheck(event, treeId, treeNode){
            	var treeObj = $.fn.zTree.getZTreeObj(treeId).getCheckedNodes(true);
            	var str = "";
            	for(var i = 0, len = treeObj.length; i < len; i++){
            		if(treeObj[i]["nodeType"] == "auth"){
            			str += ( treeObj[i].name + ";" );
            		}
            	}
            	$("#role-tree").val(str);
            }
            function toggle() {
                var menuContent = $("#menuContent");
                if(menuContent.css("display") == 'none'){
                    $("#menuContent").css({left:0 + "px", top:31 + "px"}).slideDown("fast");
                    $("body").bind("mousedown", onBodyDown);
                }
            }
            function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $("body").unbind("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                    hideMenu();
                }
            }
            // 修改
            $('#save').on('click',function(){
            	var treeObj = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes(true);
            	for(var i = 0,len = treeObj.length; i < len; i++){
            		if(treeObj[i]["nodeType"] != "auth"){
            			treeObj.splice(i,1);
            			i--;
            			len--;
            		}
            	}
                var formData = {
					"description": $("#role-description").val(),
					"name": $("#role-name").val(),
					"id": roleData.id,
					"authoritiesContent": "",
					"authorities": treeObj
				}
                if(formData["name"].trim().length==0){
                	toastr.error("角色名称不能为空!");
                	return;
                }
                if(formData.authorities.length == 0){
                	toastr.error("权限列表不能为空!");
                	return;
                }
                if(formData["name"].trim().length > 25){
            		toastr.error('名称不能超过25个字符!');
            		return;
            	}
                if(formData["description"].trim().length > 250){
            		toastr.error('描述不能超过250个字符!');
            		return;
            	}
                $.ajax({
                    url: contextPath + '/Role/modifyRole',
                    type: 'POST',
                    data: JSON.stringify(formData),
                    cache : false,
                    contentType: "application/json",
                    success: function (data) {
                    	if(data.code == "1"){
                    		toastr.success('修改成功!');
                    		location.hash = "platform-roleGroup-role";
                    	}else{
                    		toastr.error("修改失败!",data.message);
                    		console.log(data);
                    	}
                    },
                    error: function (data) {
                    	console.log(data);
                        toastr.error("修改失败!",data.message);
                    } 
				});
			});

            // 取消
            /*$('#cancel').on('click',function(){
				$('#add_form')[0].reset();
				$('#role-tree').val('');
			});*/
        </script>
    </div>
</body>
</html>
